<template>
    <div>
        <div style="width: 500px;margin: 150px auto;">
            <h1  style="text-align: center;margin-bottom: 30px;">登录</h1>
            <el-form :model="user" size="large"
                     :rules="rules"
                     ref="ruleFormRef"

            >
                <el-form-item prop="username">
                    <el-input v-model="user.username"   :prefix-icon="User"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="user.password" show-password :prefix-icon="Lock"/>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" style="width:100% ;" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { MagicStick ,User,Lock} from '@element-plus/icons-vue';
import {ref, reactive, getCurrentInstance} from 'vue'
import  {ElMessage,ElNotification} from "element-plus";
import request from "../request";
const {proxy} = getCurrentInstance()

const user = reactive({
    name:"张三"
})
const changeUser = (name) => {
    user.name = name
}


const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],

})

const login = () => {
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid){
     request.post('/user/login').then(res =>{
       if (res.code === '200'){
         ElNotification({
           type:'error',
           message: '用户名或密码错误'
         })
       }else {
         ElNotification({
           type:'error',
           message: res.msg
         })
       }
     })
    }else {
      ElNotification({
        type:'error',
        message: '用户名或密码错误'
      })
    }
  })
}

</script>